<template>
  <div class="randoms-container">
    <div class="app-container">
      <el-card>
        <!-- 搜索区域 -->
        <el-form :model="form" label-width="100px" style="display:flex;justify-content:space-between">
          <el-form-item
            label="关键字"
            size="small"
          >
            <el-input v-model="form.keyword" autocomplete="off" style="width" placeholder="根据编号搜索" />
          </el-form-item>
          <el-form-item size="small">
            <el-button @click="hClear">清除</el-button>
            <el-button type="primary" @click="hSearch">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 搜索区域 -->
        <el-alert
          type="info"
          :closable="false"
        >
          <template style="font-size:24px !important">
            <i class="el-icon-info" style="margin-right:10px;font-size:14px" />
            <span style="font-size:14px">数据一共{{ total }}条</span>
          </template>
        </el-alert>
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          style="width: 100%;margin:15px 0 20px"
        >
          <el-table-column
            prop="id"
            label="编号"
            width="220"
          />
          <el-table-column
            label="题型"
            width="80"
          >
            <template slot-scope="scope">
              {{ questionTypeList[scope.row.questionType] }}
            </template>
          </el-table-column>
          <el-table-column
            label="题目编号"
            width="220"
          >
            <template slot-scope="scope">
              <el-link v-for="item in scope.row.questionIDs" :key="item.number" type="primary" :underline="false" @click="hWatch(item.id)">{{ item.number }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            width="180"
          />
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            width="110"
          />
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)"
            width="95"
          />
          <el-table-column
            prop="userName"
            label="录入人"
            width="100"
          />
          <el-table-column
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle plain @click="hDel(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格区域 -->
        <!-- 分页功能区域 -->
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <!-- 分页功能区域 -->
      </el-card>
    </div>
    <el-dialog
      title="题目预览"
      :visible.sync="showDialog"
      width="65%"
    >
      <questionsDialog v-if="showDialog" :cur-id="curId" :question-type-list="questionTypeList" :question-difficulty-type-list="questionDifficultyTypeList" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType, difficulty } from '../../api/hmmm/constants'
import questionsDialog from './questions-randoms-dialog/questionsDialog.vue'
export default {
  components: {
    questionsDialog
  },
  data() {
    return {
      form: {
      // 用于保存当前的关键字
        keyword: ''
      },
      // 保存当前表格数据
      tableData: [],
      // 保存当前页码
      currentPage: 1,
      // 保存当前页的信息条数
      pagesize: 20,
      // 保存当前页码总条数
      total: 0,
      // 保存处理后的问题类型
      questionTypeList: {},
      // 保存处理后的问题难度
      questionDifficultyTypeList: {},
      // 保存当前弹出框的显示或隐藏状态
      showDialog: false,
      // 保存当前点击题目的id
      curId: 0
    }
  },
  created() {
    this.loadQuestionsRandomsList()
  },
  // 请求QuestionsRandoms数据渲染表格
  methods: {
    async loadQuestionsRandomsList() {
      try {
        const res = await randoms({ page: this.currentPage, pagesize: this.pagesize, keyword: this.form.keyword })
        console.log('loadQuestionsRandomsList', res)
        this.total = res.data.counts
        this.tableData = res.data.items
        // 将QuestionType的格式转变成对应的中文
        this.questionTypeList = this.formatQuestionType(questionType)
        this.questionDifficultyTypeList = this.formatQuestionType(difficulty)
      } catch (err) {
        console.log('loadQuestionsRandomsList', err)
      }
    },
    // 根据编号搜索组题列表数据
    hSearch() {
      this.loadQuestionsRandomsList()
    },
    // 清除表单数据
    hClear() {
      this.form.keyword = ''
    },
    // 用于显示弹框,传递当前点击的id信息
    hWatch(id) {
      this.showDialog = true
      // 将传过来的id保存到curId中
      this.curId = id
    },
    // 删除数据组题列表数据
    async doDel(obj) {
      try {
        const res = await removeRandoms(obj)
        console.log('removeRandoms', res)
      } catch (err) {
        console.log('removeRandoms', err)
      }
    },
    hDel(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.tableData.length <= 1) {
          this.currentPage = this.currentPage - 1
          if (this.currentPage <= 1) {
            this.currentPage = 1
          }
        }
        this.doDel({ id: row.id })
        this.loadQuestionsRandomsList()
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页功能方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      // 重新渲染页面
      this.loadQuestionsRandomsList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      // 重新渲染页面
      this.loadQuestionsRandomsList()
    },
    // 用于将questionType格式化成[1:'单选']的格式
    formatQuestionType(arr) {
      return arr.reduce((acc, item) => {
        acc[item.value] = item.label
        return acc
      }, {})
    }
  }
}
</script>

<style scoped lang='scss'>
   ::v-deep .el-dialog__footer{
     text-align:right;
   }
</style>
